<template>
    <div class="mBg start">
        <div class="mt-[40px] starttitle color1 mb-[25px] px-[20px]">
            长处和困难问卷（家长版)
        </div>
        <div class="startpcBox h-[519px] relative">
            <div class="">
                <div class="ccc">
                    <div class="startpcBoxtitle  mx-[auto]  inline-block ">选择题</div>
                </div>
                <div>
                    <div class="ccc">
                        <div class="  color2 mt-[17px] mb-[20px]">
                            {{ index + 1 }} / {{ allQuestionlength }}
                        </div>
                    </div>

                    <div>
                        <p class=" color4 text-center px-[35px] text-[17px] font-bold">
                            {{ questionList[index].title }}</p>
                        <div class="px-[38px] mt-[20px]">
                            <div class="optionsBox flex justify-between"
                            :key="item.title"
                                :class="{ 'optionActive': item.title === questionList[index].chose }"
                                v-for="item in questionList[index].options" @click="choseAnswer(item.title)">
                                <p>
                                    {{ item.title }}
                                </p>
                                <div class="mr-[25px] mt-[5px]" v-if="item.title === questionList[index].chose">
                                    <van-icon name="success" size="20" color="#fff" />
                                </div>
                            </div>
                        </div>




                    </div>

                </div>
            </div>
            <div class="px-[40px] mt-[20px]  w-[100%]">

                <div class="resultButton ccc" @click="goResult">
                    {{ index + 1 === allQuestionlength ? '查看结果' : '下一题' }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { showFailToast } from 'vant';
import questionJs from "@/views/home/pc/question"
const questionList = ref<QuestionObj[]>([
])
const index = ref(0)

questionList.value = [
    ...questionJs.list,
    ...questionJs.kunNanList
]
for (let i of questionList.value) {
    if (i.type === 'pt') {
        i.options = questionJs.ptOption
    }
    if (i.type === 'kun' && !i.options) {
        i.options = questionJs.kunOption
    }
}
const allQuestionlength = computed(() => {
    const aswerList = questionList.value.map(res => (res.chose || ''))
    const showList = ['少许困难', '有困难', '有很大困难']
    const isKun = aswerList.some(res => (showList.includes(res)))
    const filterList = questionList.value.filter(res => (res.type !== 'kun'))
    if (isKun) {
        return questionList.value.length
    } else {
        return filterList.length
    }
})

const choseAnswer = (title: string) => {
    questionList.value[index.value].chose = title
    // index.value ++
    // goResult()
}
const router = useRouter()
const route = useRoute()
const goResult = () => {
    if (!questionList.value[index.value].chose) {
        showFailToast('请选择一个选项');
        return
    }
    if (index.value + 1 === allQuestionlength.value) {
        checkResult()
    } else {

        index.value++
    }

}
import {useUserStore} from "@/store/user";
const user = useUserStore()
const checkResult = () => {
    const choseList = questionList.value.map(res => (res.chose || ''))
    console.log(choseList);
    // user.setInfo({
    //     choseList: choseList,
    //     ...route.query,
    // }) 
    router.replace({
        path: '/result',
        query: {
            ...route.query,
            choseList: JSON.stringify(choseList)
        }
    })
}
</script>

<style scoped lang="scss">
.start {
    .starttitle {
        font-size: 26px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 600;
        text-align: center;
    }

    .startpcBox {
        background-image: url("../../../assets/image/pcbg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 14px;
    }

    .startpcBoxtitle {
        padding: 5px 25px;
        color: #905919;
        font-size: 15px;
        height: 28px;
        background: linear-gradient(90deg, #FDF1B7 0%, #F8E272 100%);
        border-radius: 14px 14px 14px 14px;
    }

    .optionsBox {
        padding-left: 25px;
        height: 51px;
        color: #3F475C;
        margin-bottom: 15px;
        line-height: 51px;
        background: #F5F5F7;
        border-radius: 26px 26px 26px 26px;
        font-weight: 500;
    }

    .optionActive {
        background: #4C7BE4 !important;

        p {
            color: #fff !important
        }
    }

    .resultButton {
        height: 51px;
        background: linear-gradient(270deg, #F7971C 0%, #FCC126 100%);
        box-shadow: 0px 4px 7px 0px #F9D39B;
        border-radius: 26px 26px 26px 26px;
        color: #fff;
    }
}
</style>